// 向外暴露文件
// 因为webpack是基于node构建的，所以webpack都支持node的API
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin'); //目的是自动生成index页面的插件
// // 创建插件的实例对象
const htmlPlugin = new HtmlWebPackPlugin({
    template: path.join(__dirname, './src/index.html'), //源文件
    filename: 'index.html' //生成首页的名称
})

// webpack默认只能打包处理.js文件，像.png .vue等无法打包，所以需要第三方loader
module.exports = {
    mode: 'development',
    // 两种模式：development(开发模式),production(生产模式)--配置压缩
    plugins: [
        htmlPlugin
    ],
    module: { //第三方模块的配置规则
        rules: [ //第三方匹配规则
            { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ },
            // 其中，有一个固定的参数，叫做module，表示普通的css样式变，启用模块化
            { test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.ttf|woff|woff2|eot|svg$/,use:'url-loader'},
            {test:/\.scss$/,use:['style-loader','css-loader?modules','sass-loader']}
        ]
    },
    resolve:{
        // 如果省略后缀，则可以自动的补全
        extensions: ['.js', '.jsx', '.json'],
        alias:{
            // 这样@就表示项目根目录中src的这层目录
            '@':path.join(__dirname,'./src')
        }
    },
    devServer: {
        contentBase: path.join(__dirname, 'src')
    }
}